import React from 'react';
import { Text, Image, View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import styles from './styles';

const isSelected = (scene, key) => key === scene;

const DEF_SIZE = 20
const DEF_FONT_SIZE = 14

export default ({
  rowKey = '',
  title = '',
  iconName = '',
  iconSize = DEF_SIZE,
  onPress = v => v,
  color = '#999',
  selectedIconName = '',
  selectedColor = '#4db8ff',
  selectedIconSize = DEF_SIZE + 4,
  style = {},
  customItem,
  currentScene
}) => {
  if (customItem) {
    return customItem;
  }
  const selected = isSelected(currentScene, rowKey);
  const currentColor = selected ? selectedColor : color;
  const currentIconName = selected ? selectedIconName || iconName : iconName;
  return (
    <TouchableOpacity style={[styles.item, style]} onPress={onPress}>
      {<Icon
        name={currentIconName}
        color={currentColor}
        size={selected ? selectedIconSize : iconSize}
      />}
      {title ? <Text style={{ color: currentColor, fontSize: DEF_FONT_SIZE, marginTop: 5 }}>{title}</Text> : null}
    </TouchableOpacity>
  );
};
